<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
			#box1{
<!--				border: solid red 1px;-->
				position:absolute;
				top:5%;
				left:5%;
				width:500px;
				height:400px;
			}
			#box2{
				border:   1px;
				position:absolute;
				top:5%;
				left:calc(35% - 25px);
				width:500px;
				height:400px;
			}
			#box3{
				border:   1px;
				position:absolute;
				top:5%;
				right:5%;
				width:500px;
				height:400px;
			}
			#box4{
				border:  1px;
				position:absolute;
				top:60%;
				left:5%;
				width:500px;
				height:400px;
			}
			#box5{
				border:   1px;
				position:absolute;
				top:60%;
				left:35%;
				width:500px;
				height:400px;
			}
			#box6{
				border:   1px;
				position:absolute;
				top:60%;
				right:5%;
				width:600px;
				height:400px;
			}

		</style>
    <script src="../static/js/echarts.min.js"></script>
	<!--    3d图形必须要导入这个库，否则不显示图形	-->
	<!-- 引入 echarts-gl 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	<!--     导入词云组件	-->
	<script src="../static/js/echarts-wordcloud-2.1.0/dist/echarts-wordcloud.min.js"></script>
</head>
<body>
<div id="box">
			<div id="box1"></div>
			<div id="box2"></div>
			<div id="box3"></div>
			<div id="box4"></div>
			<div id="box5"></div>
			<div id="box6"></div>
		</div>
<!--   js代码	-->
	<script>
	//	 图1：词云图
		//	初始化echarts
		var mychart1=echarts.init(document.getElementById("box1"));
		//	数据源 flask的写法，引入python的data1变量
		var data1={{data1|tojson|safe}};
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		var option = {
        	title:{
						text:'各类型电影数量',
						left:'center',
						top:5
					},
            series: [{
                type: 'wordCloud',
                shape: 'circle',
                gridSize: 30,
                sizeRange: [20, 70], // 字体大小范围
                 rotationRange: [-30, 30], // 减小旋转幅度
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255)
                            ].join(',') + ')';
                        }
                    }
                },
                data: data1
            }]
        };

		//	展示图形1
		mychart1.setOption(option);


		//	 图2：饼图
		//	初始化echarts
		var mychart2=echarts.init(document.getElementById("box2"));
		//	数据源 flask的写法，引入python的data1变量
		var data2={{data2|tojson|safe}};
		//	把数据提取到
		var data2_dict=[];
		//	将数据追加到data2里面
		for(var key in data2){
			data2_dict.push(data2[key])
		}
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		option = {
  title: {
    text: '每个国家拍摄电影数量',
    left: 'center',
	  top:5
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
	 top:50
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '60%',
		 center: ['50%', '50%'],
      data: data2_dict,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

		//	展示图形2
		mychart2.setOption(option);


		//	 图3：环形图
		//	初始化echarts
		var mychart3=echarts.init(document.getElementById("box3"));
		//	数据源 flask的写法，引入python的data3变量
		var data3={{data3|tojson|safe}};
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
	option = {
    // 添加标题
    title: {
        text: '角色主演次数分析',  // 替换为实际需要的标题
        left: 'center',
        top: 0,  // 标题位置在顶部
        textStyle: {
            fontSize: 18,
            fontWeight: 'bold'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    // 调整图例位置
    legend: {
        top: '5%',  // 将图例下移，避免遮挡
        left: 'center',
        orient: 'horizontal',  // 水平排列
        itemGap: 10  // 图例项之间的间隔
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '70%'],
            center: ['50%', '55%'],  // 调整环形图位置
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: data3
        }
    ]
};

		//	展示图形3
		mychart3.setOption(option);


		//	 图4：半环形图
		//	初始化echarts
		var mychart4=echarts.init(document.getElementById("box4"));
		//	数据源 flask的写法，引入python的data3变量
		var data4={{data4|tojson|safe}};
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		option = {
  title: {
        text: '中国参与拍摄占比',
        left: 'center',
        top: 0,
        textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
        },
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'  // 提示框显示格式
  },
  legend: {
    top: '10%',
    left: 'center',
    data: ['中国参演', '中国未参演']  // 修改图例显示文本
  },
  series: [
    {
      name: '参演情况',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      startAngle: 180,
      endAngle: 360,
      data: [
        {
          value: data4.find(item => item.name === 1).value,  // 1对应的值
          name: '中国参演'  // 将1映射为"中国参演"
        },
        {
          value: data4.find(item => item.name === 0).value,  // 0对应的值
          name: '中国未参演'  // 将0映射为"中国未参演"
        }
      ],
      label: {
        show: true,
        formatter: '{b}: {c} ({d}%)'  // 饼图标签显示格式
      }
    }
  ]
};


		//	展示图形4
		mychart4.setOption(option);


		//	 图5：柱状图
		//	初始化echarts
		var mychart5=echarts.init(document.getElementById("box5"));
		//	数据源 flask的写法，引入python的data3变量
		var data5={{data5|tojson|safe}};
		//	将数据添加到指定数组
		var data5_x=[];
		var data5_y=[];
		//	添加数据
		for(var key in data5){
			data5_x.push(data5[key]['name']);
			data5_y.push(data5[key]['value'])
		}
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		option = {
			 title: {
        text: '各类型电影平均分Top10',
        left: 'center',
        top: 0,
        textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
        }
    },
  xAxis: {
    type: 'category',
    data: data5_x, // 假设 data5_x = ['类型A', '类型B', ...]
    axisLabel: {
      interval: 0, // 强制显示所有标签
      rotate: 30,  // 标签旋转30度（防止重叠）
      fontSize: 12,
      margin: 15    // 标签与轴线的距离
    },
    axisTick: {
      alignWithLabel: true // 刻度与标签对齐
    }
  },
  yAxis: {
    type: 'value',
    min: function(value) { // 动态设置最小值（比数据最小值稍低）
      return (value.min - 0.1).toFixed(2);
    },
    max: function(value) { // 动态设置最大值（比数据最大值稍高）
      return (value.max + 0.1).toFixed(2);
    },
    axisLabel: {
      formatter: '{value}.00' // 强制显示两位小数（如 8.00）
    },
    splitNumber: 10 // 增加Y轴分割段数
  },
  grid: {
    bottom: '20%' // 底部留更多空间给X轴标签
  },
  series: [{
    data: data5_y, // 假设 data5_y = [8.04, 8.09, ...]
    type: 'bar',
    showBackground: true,
    backgroundStyle: {
      color: 'rgba(180, 180, 180, 0.2)'
    },
    label: { // 在柱顶显示数值
      show: true,
      position: 'top',
      formatter: '{c}' // 显示原始数据值
    },
    barWidth: '60%' // 调整柱宽
  }]
};


		//	展示图形5
		mychart5.setOption(option);


		//	 图5：柱状图
		//	初始化echarts
		var mychart6=echarts.init(document.getElementById("box6"));
		//	数据源 flask的写法，引入python的data3变量
		var data6={{data6|tojson|safe}};
		//	将数据添加到指定数组
		var data5_x=[];
		var data5_y=[];
		//	添加数据
		for(var key in data5){
			data5_x.push(data5[key]['name']);
			data5_y.push(data5[key]['value'])
		}
		//	检查数据
<!--		console.log(value_data);-->
		//	图形的设置
		option = {
            title: {
                text: '各国电影平均评分 TOP10',
                left: 'center',
                textStyle: {
                    fontSize: 18
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: '{b}: {c}'  // 提示框格式：国家: 评分
            },
            grid: {
                left: '15%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                name: '平均评分',
                axisLabel: {
                    formatter: '{value}'  // 可改为 '{value}分' 更明确
                },
                min: 7,  // 根据数据范围调整
                max: 10
            },
            yAxis: {
                type: 'category',
                data: data6.map(item => item.name),  // 国家列表
                axisLabel: {
                    fontSize: 12
                }
            },
            series: [{
                name: '评分',
                type: 'bar',
                data: data6.map(item => item.value),  // 评分列表
                label: {
                    show: true,
                    position: 'right',  // 数值显示在柱子右侧
                    formatter: '{c}'    // 显示原始值
                },
                itemStyle: {
                    color: function(params) {
                        // 按评分高低设置渐变色
                        const colors = [
                            [0.8, '#61a0a8'],  // 低评分
                            [0.95, '#c23531']  // 高评分
                        ];
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: colors[0][1] },
                            { offset: params.data / 10, color: colors[1][1] }
                        ]);
                    },
                    borderRadius: [0, 5, 5, 0]  // 柱子右侧圆角
                }
            }]
        };



		//	展示图形5
		mychart6.setOption(option);





















	</script>
</body>
</html>